import { Component, createContext, useContext } from 'react';

const myContext = createContext();

// class Child extends Component {
// 	render() {
// 		return <Consumer>{
// 			(props) => {
// 				console.log(props);
// 				return <strong>{props.info}</strong>
// 			}
// 		}
// 		</Consumer>
// 	}
// }

class Child extends Component {
	static contextType = myContext;
	render() {
		console.log('contextType', this.context)
		return <strong>{this.context.info}</strong>
	}
}

function Child2() {
	return (
		<myContext.Consumer>
			{
				(context) => <strong>{context.info}</strong>
			}
		</myContext.Consumer>
	)
}

function Child3() {
	let ss = useContext(myContext);
	return <strong>{ss.info}</strong>
}

class Parent extends Component {
	render() {
		return <div>
			<Child info={this.props.info} />
			<Child2 />
			<Child3 />
		</div>
	}
}

class Context extends Component {
	render() {
		return (<div>
			<myContext.Provider value={{ info: 'zy' }}>
				<Parent />
			</myContext.Provider>
		</div>)
	}
}

export default Context;